<template>
    <view class="special" :style="{ 'background-color': info.bg_color }">

        <view class="top" v-if="code">
            <mx-navbar :title="info.name"></mx-navbar>
            <mx-banner :list="info.banner" :dots="false"></mx-banner>
        </view>

        <view class="nav" v-if="floor && floor.length > 0" :style="{ top: `${$tools.navbar_height() - 1}px` }">
            <scroll-view scroll-x class="tab-main" :style="{ 'background-color': style_info.bg || '#f3f9ff' }" scroll-with-animation :scroll-left="scrollLeft">
                <view class="tab-module">
                    <view class="tab-item"
                        :class="{ 'act-color': index == nav_curr, 'flex1': floor.length <= 5, 'atw': floor.length > 5 }"
                        v-for="(item, index) in floor"
                        :style="{ 'color': index == nav_curr ? style_info.act : style_info.font }" :key="index"
                        @tap="(e) => navSelect(e, item)" :data-id="index">
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="content">
            <view class="module">
                <view class="gbody">
                    <mx-watergoods ref="water_goods" :goods="goods" :pn="curr_page"></mx-watergoods>
                </view>
            </view>
        </view>
        <mx-loading v-model="load"></mx-loading>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
    code: {
        type: String,
        default: ''
    },
    modelValue: { required: true },
    scroll_top: {
        type: [String, Number],
        default: 0
    }
})

const emit = defineEmits(['update:modelValue', 'change']);

const data = reactive({
    init_floor: [],
    info: {},
    floor: [],
    goods: [],
    nav_curr: 0,
    scrollLeft: 0,
})


const curr_page = ref(1)
const { floor, info, nav_curr, scrollLeft, goods } = toRefs(data)

//监听数据
watch(
    () => props.modelValue,
    (value) => {
        curr_page.value = value
        getGoods()
    },
    { immediate: true }
);

const style_info = computed(() => {
    let pdata = {
        bg: '',
        font: '',
        act: ''
    }
    if (data.floor.length > 0) {
        let item = data.floor[0]
        pdata = {
            bg: item.bg_color,
            font: item.font_color,
            act: item.select_color
        }
    }
    return pdata
})

onMounted(() => {
    if (props.code) {
        setScrollHeight()
    }
    curr_page.value = props.modelValue
    getData()
})
const water_goods = ref(null)

let scroll_top = ref(0)
function setScrollHeight() {
    setTimeout(() => {
        const query = uni.createSelectorQuery().in(proxy)
        query
            .select(`.top`)
            .boundingClientRect((res) => {
                scroll_top.value = res &&  (res.height - proxy.$hh)
            })
            .exec()
    }, 1500)
}

watch(() => props.scroll_top, (val) => {
    scroll_top.value = val
})

async function getData() {
    let res = await proxy.$api('Special', {
        code: props.code
    })
    if (res.code == 0) {
        data.info = res.data || {}
        data.floor = data.info.floor
        
        data.init_floor = JSON.parse(JSON.stringify(res.data.floor))
        if (data.floor.length > 0) {
            data.goods = data.floor[0].goods
            water_goods.value.getList(data.goods, 1)
        }
    }
}
const load = ref('loading')

// 获取加载的商品数据
async function getGoods() {
    if (curr_page.value == 1) return
    let res = await proxy.$api('SpecialGoods', {
        special_floor_id: data.floor[data.nav_curr].id, //楼层ID
        page: curr_page.value
    }, false, false)
    if (res.code == 0) {
        data.goods = res.data
        water_goods.value.getList(data.goods, curr_page.value)
        if (res.data.length == 0) {
            setTimeout(() => {
                load.value = 'finish'
            }, 300)
        }
    }
}

function navSelect(e, item) {
    data.nav_curr = e.currentTarget.dataset.id;
    data.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    curr_page.value = 1
    emit('update:modelValue', curr_page.value);
    data.goods = data.init_floor[data.nav_curr].goods
    water_goods.value.getList(data.goods, 1)
    uni.pageScrollTo({
        scrollTop: scroll_top.value,
        duration: 50
    })
}
</script>

<style lang="scss" scoped>
.gitem {
    width: 100%;
    height: 100%;
    position: relative;
}

.module {
    width: 100%;
    height: 100%;
    position: relative;

    .gbody {
        padding: 30rpx 0 0;
    }
}


.nav {
    width: 100%;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 9;

    .tab-module {
        width: 100%;
        display: flex;
        align-items: center;

        .tab-item {
            font-size: 26rpx;
            text-align: center;
            line-height: 80rpx;
        }

        .flex1 {
            flex: 1;
        }

        .atw {
            width: auto;
            padding: 0 30rpx;
        }
    }

    .cu-item {
        flex: 1;
        font-size: 24rpx;
        position: relative;
        color: #000;

        .act-line {
            width: 40rpx;
            height: 6rpx;
            border-radius: 6rpx;
            background-color: $main_color;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -20rpx;
            z-index: 3;
        }
    }

    .act-color {
        color: $main_color;
        font-weight: 500;
        // background-image: url('https://ms-1259595841.cos.ap-shanghai.myqcloud.com/upload/2a/76/9e/2a769ea288cacf34d686b06f2fd649fe.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 0%;
    }
}

</style>